<!DOCTYPE html>
<html>
<head>
<title>Overview</title>
<meta charset="utf-8">

<style>
.tg  {border-collapse:collapse;border-spacing:0;width:100%;color: darkslategray;border: inset;height:585px;}
.tg td{font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{height: 55px;font-size:24px;font-weight:bold;text-align:left;padding:0px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;background-color:#f0f0f0}
.tg .tg-1{width:77%;font-size:20px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}
.tg .tg-2{font-size:20px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}
.tg .tg-3{height: 15px;font-size:14px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}		
</style>

</head>

<script src="/jquery-3.5.1.min.js"></script>

<script>
	function addZero(i) {
	  if (i < 10) {
		i = "0" + i;
	  }
	  return i;
	}

	$ (document).ready(function() {
	var d = new Date();
	var h = addZero(d.getHours());
	var m = addZero(d.getMinutes());
	var s = addZero(d.getSeconds());

	$('#img').html('<img src="/img_tmp/alg_roi.jpg" style="width:100%; max-height:555px;"></img>');
	$("#raw").load("/wasserzaehler.html?rawvalue=true");
	$("#corrected").load("/wasserzaehler.html");
	$("#checked").load("/setPreValue.html");
	$("#start").load("/starttime");
	$('#timestamp').html("Last Page Refresh:" + (h + ":" + m + ":" + s));
	refresh();
	});

	function refresh() {
	setTimeout (function() {
	var time = new Date();
	var timestamp = new Date().getTime();
	var d = new Date();
	var h = addZero(d.getHours());
	var m = addZero(d.getMinutes());
	var s = addZero(d.getSeconds());	
	// reassign the url to be like alg_roi.jpg?timestamp=456784512 based on timestamp
	$('#img').html('<img src="/img_tmp/alg_roi.jpg?timestamp='+ timestamp +'" style="width:100%; max-height:555px;"></img>');
	$("#raw").load("/wasserzaehler.html?rawvalue=true");
	$("#corrected").load("/wasserzaehler.html");
	$("#checked").load("/setPreValue.html");
	$("#start").load("/starttime");
	$('#timestamp').html("Last Page Refresh:" + (h + ":" + m + ":" + s));
	  refresh();
	}, 300000);
  }
</script>

<body style="font-family: arial">

<table class="tg">
  <tr>
    <td class="tg-1" rowspan="9"><div id="img"></div></td>
    <th class="th">Raw Value:</th>
  </tr>	
  <tr>	
    <td class="tg-2">
	<div id="raw"></div>
	</td>	
  </tr>
  <tr>
    <th class="th">Corrected Value:</th>
  </tr>	
  <tr>	
    <td class="tg-2">
	<div id="corrected"></div>
	</td>	
  </tr>
  <tr>
    <th class="th">Checked Value:</th>
  </tr>	
  <tr>	
    <td class="tg-2">
	<div id="checked"></div>
	</td>	
  </tr> 
   <tr>
    <th class="th">Start Time:</th>
  </tr>	
  <tr>	
    <td class="tg-2">
	<div id="start"></div>	
	</td>	
  </tr> 
  <tr>	
    <td class="tg-3">
	<div id="timestamp"></div>	
	</td>	
  </tr>    
</table>

</body>
</html>